<template>
  <div :id="`mars3d-container${mapKey}`" class="mars3d-container"></div>
</template>

<script>
import * as mars3d from 'mars3d';
import { nanoid } from 'nanoid';
import 'mars3d/dist/mars3d.css'
let map
export default {
  name: 'mars3dViewer',
  data() {
    return {
      mars3dDataobj: { "id": "1200549743", "name": "金盘村", "lx": "村庄", "modelUrl": "http://172.16.15.201/qxm/jinpan/Scene/Production_1.json", "weatherCity": "广水市", "modelPosition": { "alt": 14 } }
    }
  },
  props: {
    // 地图唯一性标识
    mapKey: {
      type: String,
      default: nanoid()
    },
    // 初始化配置config.json的地址
    url: String,
    // 自定义参数
    options: Object
  },
  mounted() {
    mars3d.Util.fetchJson({ url: this.url }).then((data) => {
      // 构建地图
      this.initMars3d({
        ...data.map3d,
        ...this.options
      })
    })
  },
  beforeDestroy() {
    map = this[`map${this.mapKey}`]
    if (map) {
      gis.by_destoryed(map)
      // map.destroy()
      delete this[`map${this.mapKey}`]
    }
  },
  methods: {
    initMars3d(mapOptions) {
      if (this[`map${this.mapKey}`]) {
        this[`map${this.mapKey}`].destroy()
      }
      // 创建三维地球场景
      map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
      this[`map${this.mapKey}`] = map
      console.log('>>>>> 地图创建成功 >>>>', map)
      // 抛出事件
      // 进入地下  true禁止 false允许
      map.viewer.scene.screenSpaceCameraController.enableCollisionDetection =
        true;
      // 开场动画
      map.openFlyAnimation();
      // 针对不同终端的优化配置
      if (mars3d.Util.isPCBroswer()) {
        map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数
        // IE浏览器优化
        if (window.navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
          map.viewer.targetFrameRate = 20; // 限制帧率
          map.scene.requestRenderMode = false; // 取消实时渲染
        }
      } else {
        map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数
        // 移动设备上禁掉以下几个选项，可以相对更加流畅
        map.scene.requestRenderMode = false; // 取消实时渲染
        map.scene.fog.enabled = false;
        map.scene.skyAtmosphere.show = false;
        map.scene.globe.showGroundAtmosphere = false;
      }
      // //二三维切换不用动画
      if (map.viewer.sceneModePicker) {
        map.viewer.sceneModePicker.viewModel.duration = 0.0;
      }
      // webgl渲染失败后，刷新页面
      map.on(mars3d.EventType.renderError, async () => {
        window.location.reload();
      });
      this.$emit('onload', map)

    }

  }
}
</script>

<style lang="less" scoped>
.mars3d-container {
  width: 100%;
  height: 100%;

  .cesium-viewer-toolbar {
    top: auto !important;
    bottom: 35px !important;
    left: 12px !important;
    right: auto !important;
  }

  .cesium-toolbar-button img {
    height: 100%;
  }

  .cesium-viewer-toolbar>.cesium-toolbar-button,
  .cesium-navigationHelpButton-wrapper,
  .cesium-viewer-geocoderContainer {
    margin-bottom: 5px;
    float: left;
    clear: both;
    text-align: center;
  }

  .cesium-button {
    background-color: rgb(23 49 71 / 80%);
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
    line-height: 32px;
  }

  .cesium-button:hover {
    background: #3ea6ff;
  }

  /**  cesium 底图切换面板 */
  .cesium-baseLayerPicker-dropDown {
    bottom: 0;
    left: 40px;
    max-height: 700px;
    margin-bottom: 5px;
    background-color: rgb(23 49 71 / 80%);
    z-index: 9999;
  }

  /**  cesium 帮助面板 */
  .cesium-navigation-help {
    top: auto;
    bottom: 0;
    left: 40px;
    transform-origin: left bottom;
    background: none;
    background-color: rgb(23 49 71 / 80%);

    .cesium-navigation-help-instructions {
      background: none;
    }

    .cesium-navigation-button {
      background: none;
    }

    .cesium-navigation-button-selected,
    .cesium-navigation-button-unselected:hover {
      background: rgb(0 138 255 / 20%);
    }
  }

  /**  cesium 二维三维切换 */
  .cesium-sceneModePicker-wrapper {
    width: auto;
    z-index: 9999;
  }

  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
    float: right;
    margin: 0 3px;
  }

  /**  cesium POI查询输入框 */
  .cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    z-index: 9999;
  }

  .cesium-geocoder-searchButton {
    background-color: rgb(23 49 71 / 80%);
  }

  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
    background-color: rgb(63 72 84 / 70%);
  }

  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
    background-color: rgb(63 72 84 / 90%);
  }

  .cesium-viewer-geocoderContainer .search-results {
    background-color: rgb(23 49 71 / 80%);
  }

  /**  cesium info信息框 */
  .cesium-infoBox {
    top: 50px;
    background-color: rgb(23 49 71 / 80%);
  }

  .cesium-infoBox-title {
    background-color: rgb(23 49 71 / 80%);
  }

  /**  cesium 任务栏的FPS信息 */
  .cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
  }

  .cesium-performanceDisplay-ms,
  .cesium-performanceDisplay-fps {
    color: #fff;
  }

  /**  cesium tileset调试信息面板 */
  .cesium-viewer-cesiumInspectorContainer {
    top: 10px;
    left: 10px;
    right: auto;
  }

  .cesium-cesiumInspector {
    background-color: rgb(23 49 71 / 80%);
  }

  /**  覆盖mars3d内部控件的颜色等样式 */
  .mars3d-compass .mars3d-compass-outer {
    fill: rgb(23 49 71 / 80%);
  }

  .mars3d-contextmenu-ul,
  .mars3d-sub-menu {
    background-color: rgb(23 49 71 / 80%);

    >li>a:hover,
    >li>a:focus,
    >li>.active {
      background-color: #3ea6ff;
    }

    >.active>a,
    >.active>a:hover,
    >.active>a:focus {
      background-color: #3ea6ff;
    }
  }

  /* Popup样式 */
  .mars3d-popup-color {
    color: #fff;
  }

  .mars3d-popup-background {
    background: rgb(23 49 71 / 80%);
  }

  .mars3d-popup-content {
    margin: 15px;
  }

  .mars3d-template-content label {
    padding-right: 6px;
  }

  .mars3d-template-titile {
    border-bottom: 1px solid #3ea6ff;
  }

  .mars3d-template-titile a {
    font-size: 16px;
  }

  .mars3d-tooltip {
    background: rgb(23 49 71 / 80%);
    border: 1px solid rgb(23 49 71 / 80%);
  }

  .mars3d-popup-btn-custom {
    padding: 3px 10px;
    border: 1px solid #209ffd;
    background: #209ffd1c;
  }
}



// .mars3d-container {
//   height: 100%;
//   overflow: hidden;
// }

//去掉放大缩小按钮
// .cesium-viewer {
//   .cesium-viewer-toolbar {
//     display: none;

//   }
// }

/**cesium 工具按钮栏*/
/* .cesium-viewer-toolbar {
  top: auto !important;
  bottom: 35px !important;
  left: 12px !important;
  right: auto !important;
}
.cesium-toolbar-button img {
  height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
  margin-bottom: 5px;
  float: left;
  clear: both;
  text-align: center;
}
.cesium-button {
  background-color: #3f4854;
  color: #e6e6e6;
  fill: #e6e6e6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  line-height: 32px;
} */

/**cesium 底图切换面板*/
/* .cesium-baseLayerPicker-dropDown {
  bottom: 0;
  left: 40px;
  max-height: 700px;
  margin-bottom: 5px;
} */

/**cesium 帮助面板*/
/* .cesium-navigation-help {
  top: auto;
  bottom: 0;
  left: 40px;
  transform-origin: left bottom;
} */

/**cesium 二维三维切换*/
/* .cesium-sceneModePicker-wrapper {
  width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
  float: right;
  margin: 0 3px;
} */

/**cesium POI查询输入框*/
/* .cesium-viewer-geocoderContainer .search-results {
  left: 0;
  right: 40px;
  width: auto;
  z-index: 9999;
}
.cesium-geocoder-searchButton {
  background-color: #3f4854;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
  background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
  background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
  background-color: #3f4854;
} */

/**cesium info信息框*/
/* .cesium-infoBox {
  top: 50px;
  background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
  background-color: #3f4854;
} */

/**cesium 任务栏的FPS信息*/
/* .cesium-performanceDisplay-defaultContainer {
  top: auto;
  bottom: 35px;
  right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
  color: #fff;
} */

/**cesium tileset调试信息面板*/
/* .cesium-viewer-cesiumInspectorContainer {
  top: 10px;
  left: 10px;
  right: auto;
  background-color: #3f4854;
} */

// /*区域红色弹窗开始
// */

// .party_box {
//     width: 237px;
//     height: 104px;
//     margin: 15px auto;

//     .party_message {
//         width: 100%;
//         height: 20px;
//         display: flex;
//         margin-top: 8px;
//         align-items: center;
//         background: linear-gradient(
//             90deg,
//             rgba(243, 52, 25, 0) 0%,
//             rgba(243, 52, 25, 0.1) 49%,
//             rgba(243, 52, 25, 0) 100%
//         );

//         > div:nth-child(1) {
//             width: 40%;
//             margin-left: 10px;
//             font-family: 'Alibaba PuHuiTi', serif;
//             font-style: normal;
//             font-weight: 400;
//             font-size: 14px;
//             line-height: 19px;

//             /* identical to box height */

//             color: #bdbdbd;
//         }

//         div:nth-child(2) {
//             width: 50%;
//             font-family: 'Alibaba PuHuiTi', serif;
//             font-style: normal;
//             font-weight: 400;
//             font-size: 14px;
//             line-height: 19px;
//             color: #f2af4a;
//         }
//     }
// }
// /*区域红色弹窗弹窗结束
// */
</style>
